<template>
	<view class="container">
		<view class="topbox">
			<view class="user flex-align-center">
				<image class="user-avatar" :src="userInfo.userInfo.avatarUrl || $setting.avatarUrl()"></image>
				<view class="user-con">
					<view class="user-name flex-space-between">{{userInfo.userInfo.nickName}}</view>
					<view class="user-id" v-if="userInfo.userInfo.mobile">手机号：{{userInfo.userInfo.mobile}}</view>
					<text class="user-id nothing" v-else>未认证手机号</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="cont-bg"></view>
			<view class="cont-min">
				<view class="cont-money">
					<view class="cont-mm">
						<view class="cont-m-t">本月订单额</view>
						<view class="cont-m-m">{{suminvite.month_price}}</view>
					</view>
					<view>
						<view class="cont-m-t">总订单额</view>
						<view class="cont-m-m">{{suminvite.all_price}}</view>
					</view>
				</view>
				<view class="cont-btm">
					<view class="cont-tg" v-show="showmask">
						<view class="maskshow">
							<image class="userqrcode" :src="userQrcode" mode="widthFix" :show-menu-by-longpress="true"></image>
							<view class="masktitle">{{AgentInfo.store_name}}</view>
							<view class="maskaddress">
								<view class="mask-ad-l">
									<u-icon name="map-fill" size="32rpx" color="#ffd745"></u-icon>
								</view>
								<view>{{AgentInfo.region.city}}{{AgentInfo.region.region}}{{AgentInfo.address}}{{AgentInfo.house_number}}</view>
							</view>
							<view class="maskbom">
								<u-form ref="uForm" v-if="vchange">
									<u-form-item label-width="170rpx" label="详细地址">
										<view class="receiveDetail">
											<view class="viewAddress">
												{{vuex_stall_adinfo.title?vuex_stall_adinfo.title:''}}
											</view>
											<view class="changeBtn" v-if="applyStatus!=10">
												<u-button type="warning" plain size="mini" @click="jump('/pages/mine/address/warehouse')">选择地址</u-button>
											</view>
										</view>
									</u-form-item>
									<u-form-item label-width="170rpx" label="详细位置">
										<u-input v-model="form.house_number" placeholder="请输入具体楼栋/门牌信息" />
									</u-form-item>
									<view class="flex-align-center maskbtlist">
										<button type="submit" class="maskbtn-sumb" style="margin-right: 30rpx;" @click="Onsubmit" :loading="loading">确认修改</button>
										
										<button type="button" class="maskbtn-grey" @click="cannelDlog">取消</button>
									</view>
								</u-form>
								<b-u-button-theme v-if="vchange==false" @click="changeDlog">修改定位</b-u-button-theme>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				userInfo: {
					userInfo: {
						avatarUrl: "",
					},
				},
				suminvite:{
					month_price:0,
					month_num:0,
					day_num:0,
					all_price:0
				},
				AgentInfo:{
					store_name:'',
					house_number:'',
					address:'',
					region:{
						city:'',
						region:''
					}
				},
				showmask:true,
				userQrcode:'',
				vchange:false,
				form:{},
				loading: false,
			}
		},
		onLoad() {
			this.getUserInfo();
			this.getUserShop();
			this.getAgentQrcode();
		},
		onShow() {
			// console.log("123")
			// this.getRemInfo();
			if(this.vuex_stall_adinfo){
				this.$set(this.form, 'address',this.vuex_stall_adinfo.title);
				this.$set(this.form, 'longitude',this.vuex_stall_adinfo.longitude);
				this.$set(this.form, 'latitude',this.vuex_stall_adinfo.latitude);
			}
		},
		computed: {
		    ...mapState(['vuex_stall_adinfo']),
		},
		methods: {
			getUserInfo() {
				uni.$u.api.userInfo().then(res => {
					this.userInfo = res;
				})
			},
			getRemInfo() {
				uni.$u.api.getDayinvite().then(res => {
					this.suminvite = res.sum_result;
				})
			},
			getUserShop() {
				uni.$u.api.getStallInfo().then(res => {
					this.AgentInfo = res.detail;
					console.log(this.AgentInfo)
					this.suminvite.month_num = res.YNums;
					this.suminvite.month_price = res.YMoney;
					this.suminvite.all_price = res.AllMoney;
				})
			},
			getAgentQrcode() {
				uni.$u.api.getStallQrcode({source: 'wx'}).then(res => {
					this.userQrcode = res.user_qrcode;
				})
			},
			openqrcode(){
				if(uni.$u.test.isEmpty(this.userInfo.userInfo.mobile)) {
					this.jump("/pages/login/login");
					return;
				}
				this.jump('/pages/mine/publicize/publicize_qrcode');
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			changeDlog(){
				this.vchange = true;
			},
			cannelDlog(){
				this.vchange = false;
				this.form = {};
			},
			Onsubmit() {
				if(this.loading==true){
					return;
				}
				if (uni.$u.test.isEmpty(this.form.address)) {
					uni.showToast({
						title: "请选择详细地址",
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.form.house_number)) {
					uni.showToast({
						title: "请输入详细位置",
						icon: "none"
					})
					return;
				}
				let params = this.form
				this.loading = true;
				uni.$u.api.postStallChange(params).then(res => {
					console.log(res)
					uni.showToast({
						title: "调整成功",
						icon: "success"
					})
					this.getUserShop();
					this.cannelDlog();
					this.loading = false;
				}).catch((er)=>{
					console.log(er)
					uni.showToast({
						title: er.data.msg,
						icon: "none"
					})
					this.loading = false;
				})
			},
		}
	}
</script>

<style lang="scss">
	.topbox {
		background: #BB0024;
		padding: 30rpx;
		position: relative;
		
		.user {
			padding: 0 26rpx;
			
			
			.user-avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 160rpx;
			}
			
			.user-con {
				margin-left: 22rpx;
				flex: 1;
				
				.user-name {
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
					line-height: 60rpx;
				}
				
				.user-id {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 40rpx;
					&.nothing{
						font-size: 20rpx;
						color: #e5e5e5;
						padding:8rpx 20rpx;
						background: #6b6b6b;
						border-radius: 10rpx;
					}
				}
			}
		}
		.user-qrcode{
			position: absolute;
			top: 40rpx;
			right: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.cell-item-image{
				width: 60rpx;
				height: 60rpx;
			}
			.cell-item-view{
				font-size: 20rpx;
				color: #f3f3f3;
				line-height: 45rpx;
			}
		}
	}
	
	.content{
		padding:30rpx 30rpx;
		.cont-min{
			background: #fff;
			border-radius: 30rpx;
			// padding:20rpx 20rpx;
		}
		.cont-money{
			background: linear-gradient(to bottom,#f3ebe1 0%,#f3ebe1 70%,#e9ddc5 100%);
			// background: linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
			padding:30rpx 35rpx;
			display: flex;
			flex-direction: row;
			border-radius: 30rpx 30rpx 0 0;
			font-family: Arial, Helvetica, sans-serif;
			.cont-m-t{
				font-size: 22rpx;
				color: #393939;
				line-height: 50rpx;
			}
			.cont-m-m{
				font-size: 34rpx;
				line-height: 70rpx;
				color: #ef6b00;
				font-weight: bold;
				&::after{
					content: " 元";
					font-size: 32rpx;
				}
			}
		}
		.cont-mm{
			flex-basis: 50%;
		}
		.cont-btm{
			padding:0 30rpx;
		}
		.cont-tg{
			padding:30rpx 0 35rpx 10rpx;
			display: flex;
			flex-direction: row;
			&.b-b{
				border-bottom: 1px solid #eee;
			}
			.tg-t{
				font-size: 22rpx;
				line-height: 50rpx;
				color: #6b6b6b;
			}
			.tg-m{
				font-size: 34rpx;
				line-height: 70rpx;
				color: #383838;
				font-weight: 500;
				font-family: Verdana, Geneva, Tahoma, sans-serif;
				
			}
		}
		
		.maskshow{
			width: 100%;
			padding:30rpx 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.userqrcode{
			width: 520rpx;
			left: 520rpx;
			border-radius: 20rpx;
		}
		.masktitle{
			font-size: 32rpx;
			line-height: 80rpx;
			font-weight: bold;
		}
		.maskaddress{
			display: flex;
			flex-direction: row;
			font-size: 24rpx;
			line-height: 80rpx;
			.mask-ad-l{
				margin-right: 20rpx;
			}
		}
		.maskbom{
			width: 100%;
			margin-top: 30rpx;
		}
		
		.maskbtlist{
			height: 100rpx;
			justify-content: center;
			align-items: center;
			.maskbtn-sumb{
				background: #BB0024;
				padding:0rpx 40rpx;
				line-height: 60rpx;
				color: #fff;
				border: 1rpx solid #BB0024;
				font-size: 26rpx;
				overflow: visible;
				border-radius: 100rpx;
				&::after{
					border:0;
				}
			}
			.maskbtn-grey{
				background: #666666;
				padding:0rpx 40rpx;
				line-height: 60rpx;
				color: #fff;
				border: 1rpx solid #666666;
				font-size: 26rpx;
				overflow: visible;
				border-radius: 100rpx;
				&::after{
					border:0;
				}
			}
		}
		
		.receiveDetail{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.viewAddress{
				max-width: 450rpx;
				.address{
					font-weight: bold;
				}
				.region{
					margin-top: 10rpx;
					color: #858585;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
